<template>
    <h2>构建带箭头连接线</h2>

    <h3 style="text-align:left;">1、图像节点：$(go.Picture, {
        background: 'transparent',
        width: 50,
        height: 50,
        imageStretch: go.GraphObject.Fill
        }, new go.Binding("source", "src")),</h3>
    <h3 style="text-align:left;">2、节点水平布局与垂直布局：$(go.Panel,"Vertical",.....)</h3>
    <h3 style="text-align:left;">3、连接线的管道形状，颜色</h3>


    <div id="chart-diagram" style="background-color: white; width: 1500px; height: 600px;">
    </div>

</template>

<script setup>
    import {onMounted} from 'vue';
    import go from "gojs";

    let myDiagram = null;

    const init = () => {
        const $ = go.GraphObject.make
        let myDiagram = new go.Diagram("chart-diagram", {
                'grid.visible': true, // 显示网格
                'clickCreatingTool.archetypeNodeData': {category: 'Normal', text: '新节点', notice: ''}, // 双击新建节点(可以写入节点的默认信息)；；
                'toolManager.hoverDelay': 100, // tooltip提示显示延时
                'toolManager.toolTipDuration': 10000, // tooltip持续显示时间
                allowMove: true, // 允许拖动画板
                allowDragOut: true, // 允许拖拽节点
                allowDelete: true, // 允许删除节点
                allowCopy: true, // 允许复制节点
                allowClipboard: true, // 允许粘贴节点

            }
        );
        myDiagram.nodeTemplate =
            $(go.Node, "Auto",

                {
                    resizable: true, movable: true,//是否可拖动
                    deletable: false,//是否可删除
                    doubleClick: (e, node) => {

                        alert(e, node)
                    },
                },
                new go.Binding("location", "loc"),  // get the Node.location from the data.loc value
                $(go.Panel, "Vertical",  //这个地方，可以是 Vertical ,可以是Horizonal,可以是 Spot

                    // $(go.Shape, "Circle", {width: 35, strokeWidth: 0, fill: 'red'}),
                    // {
                    //     toolTip:
                    //         $("ToolTip",
                    //             $(go.TextBlock, {margin: 5},
                    //                 new go.Binding("text", "text"))
                    //         )
                    // },
                    $(go.Picture, {
                        background: 'transparent',
                        width: 80,
                        height: 80,

                        imageStretch: go.GraphObject.Fill
                    }, new go.Binding("source", "src")),  // 把数组中的color绑定到Shape的fill上

                    $(go.TextBlock,
                        new go.Binding("text", "text"), {margin: 5})  // // 把数组中的key值绑定到TextBlock的text上
                )
            );


        myDiagram.linkTemplate =
            $(go.Link,
                {
                    layerName: "Background",
                    routing: go.Link.Orthogonal,
                    corner: 15,
                    reshapable: false,
                    resegmentable: false,

                },
                $(go.Shape, {isPanelMain: true, strokeWidth: 4}, new go.Binding("stroke", "color")),
                $(go.Shape, {
                    isPanelMain: true,
                    stroke: "white",
                    strokeWidth: 2,
                    name: "PIPE",
                    strokeDashArray: [40, 40]
                }),
                $(go.Shape,
                    {toArrow: "Triangle", fill: "red", stroke: "red", scale: 2}),
                     {
                        selectionAdornmentTemplate:
                        $(go.Adornment,
                            $(go.Shape,
                                {isPanelMain: true, stroke: "red", strokeWidth: 1}),//修改线颜色和大小
                            $(go.Shape,
                                {toArrow: "Standard", fill: "red", stroke: null, scale: 1.5})//修改线箭头的颜色和大小
                        )
                     }
            );


        var nodeDataArray = [
            {
                key: "Alpha1",
                text: '阀门1',
                color: "lightblue", loc: new go.Point(0, 0),
                src: "http://123.207.198.42:9091/images/famen1.png"
            },  // 这边的值会被遍历循环
            {
                key: "Beta1",
                text: '电机2',
                color: "pink", loc: new go.Point(-400, 350),
                src: "http://123.207.198.42:9091/images/dianji2.png"
            },  // 这边的值会被遍历循环
            {
                key: "node3",
                text: '电机3',
                color: "yellow", loc: new go.Point(600, 250),
                src: "http://123.207.198.42:9091/images/dianji.png"
            }
        ];

        var linkDataArray = [
            {
                from: "Alpha1", to: "Beta1",
                color: "lightblue"
            },
            {from: "node3", to: "Alpha1", color: "red"},
        ];

        myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

        let animat

        function animation() {
            animat = new go.Animation();
            // 虚线动画
            myDiagram.links.each((link) => {
                const dashedLink = link.findObject("PIPE");
                if (dashedLink) {
                    animat.add(dashedLink, "strokeDashOffset", 80, 0)
                }
            });

            animat.easing = go.Animation.EaseLinear;
            // Run indefinitely
            animat.runCount = Infinity;
            animat.start();

        }


        animation()

        myDiagram.addDiagramListener("objectsingleclicked", function (e) {
            var node = e.subject.part; // 获取被点击的节点

            //var part = e.subject; // 获取被点击的对象
            if (node instanceof go.Node) {
                //console.log("Clicked on a Node");

                animat.start()
            } else if (node instanceof go.Link) {
                //console.log("Clicked on a Link");
                animat.stop()
            }

            // console.log("clicked node data:", node.data); // 在控制台打印被点击节点的数据
            // 在这里添加你希望在节点被点击时执行的逻辑
            // alert("you clicked on: " + node.data.key);


        });


    };

    onMounted(() => {
        init();
    });


</script>

<style scoped>

</style>